<template>
  <div class="payment-success-container">
    <div class="success-card">
      <div class="success-icon">
        <i class="el-icon-success"></i>
      </div>
      <h2 class="success-title">支付成功</h2>
      <div class="success-info">
        <div class="info-item">
          <span class="info-label">订单编号：</span>
          <span class="info-value">{{ orderInfo.orderId }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">支付金额：</span>
          <span class="info-value">¥{{ orderInfo.amount }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">支付时间：</span>
          <span class="info-value">{{ orderInfo.payTime }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">广告位名称：</span>
          <span class="info-value">{{ orderInfo.adName }}</span>
        </div>
      </div>

      <div class="action-buttons">
        <el-button type="primary" @click="viewOrderDetail" class="action-btn">
          查看订单详情
        </el-button>
        <el-button @click="backToHome" class="action-btn">
          返回首页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaymentSuccess',
  data() {
    return {
      orderInfo: {
        orderId: 'AD20230520123456',
        amount: '2880.00',
        payTime: '2023-05-20 14:30:25',
        adName: '小区A-东门广告牌'
      }
    }
  },
  created() {
    // 从路由参数中获取订单信息
    if (this.$route.query.orderId) {
      this.orderInfo.orderId = this.$route.query.orderId
    }
    if (this.$route.query.amount) {
      this.orderInfo.amount = this.$route.query.amount
    }
    if (this.$route.query.payTime) {
      this.orderInfo.payTime = this.$route.query.payTime
    }
    if (this.$route.query.adName) {
      this.orderInfo.adName = this.$route.query.adName
    }
  },
  methods: {
    viewOrderDetail() {
      // 跳转到订单详情页
      this.$router.push({
        name: 'AdvertisingOrderDetail',
        query: {
          orderId: this.orderInfo.orderId
        }
      })
    },
    backToHome() {
      // 返回首页
      this.$router.push({ name: 'Home' })
    }
  }
}
</script>

<style scoped>
.payment-success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.success-card {
  width: 100%;
  max-width: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 40px;
  text-align: center;
}

.success-icon {
  margin-bottom: 20px;
}

.success-icon i {
  font-size: 80px;
  color: #67C23A;
}

.success-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
}

.success-info {
  text-align: left;
  margin-bottom: 30px;
  padding: 0 20px;
}

.info-item {
  margin-bottom: 15px;
  font-size: 16px;
}

.info-label {
  color: #909399;
  display: inline-block;
  width: 120px;
  text-align: right;
  margin-right: 15px;
}

.info-value {
  color: #333;
  font-weight: 500;
}

.action-buttons {
  margin-top: 30px;
}

.action-btn {
  margin: 0 10px;
  min-width: 120px;
}

@media (max-width: 768px) {
  .success-card {
    padding: 20px;
  }

  .info-label {
    width: 100px;
  }
}
</style>
